<template>
  <div class="appointment-list-container">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>预约</el-breadcrumb-item>
      <el-breadcrumb-item>预约列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索条 -->
    <div style="margin-top: 20px;">
      <el-descriptions class="margin-top" title="体检客户查询" :column="3" size="default" border>
        <template #extra>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              手机号
            </div>
          </template>
          <el-input v-model="searchForm.phone" placeholder="输入搜索的手机号" />
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              姓名
            </div>
          </template>
          <el-input v-model="searchForm.name" placeholder="输入预约体检的客户信息" />
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              性别
            </div>
          </template>
          <el-select v-model="searchForm.gender" class="m-2" placeholder="选择性别">
            <el-option v-for="item in genderOptions" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              预约院区
            </div>
          </template>
          <el-select v-model="searchForm.yuanqu" class="m-2" placeholder="选择院区地址">
            <el-option v-for="item in yuanquOptions" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              套餐类型
            </div>
          </template>
          <el-select v-model="searchForm.yuyuetaocao" class="m-2" placeholder="预约套餐">
            <el-option v-for="item in yuyuetaocaoOptions" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              体检时间
            </div>
          </template>
          <el-date-picker v-model="searchForm.yuyuedate" type="date" placeholder="Pick a day" size="default" />
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              是否归档
            </div>
          </template>
          <el-radio-group v-model="searchForm.radio2" class="ml-4">
            <el-radio label="1">未归档</el-radio>
            <el-radio label="2">已归档</el-radio>
          </el-radio-group>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 查询列表显示 -->
    <div style="margin-top: 20px;">
      <h4>预约客户查询列表</h4>
      <el-table :data="yuyuelist" style="width: 100%" stripe>
        <el-table-column label="订单编号" prop="ids" width="180" align="center"></el-table-column>
        <el-table-column label="客户姓名" prop="name" width="120" align="center"></el-table-column>
        <el-table-column label="客户手机号" prop="phone" width="180" align="center"></el-table-column>
        <el-table-column label="预约院区" prop="address" width="180" align="center"></el-table-column>
        <el-table-column label="预约套餐" prop="taocan" width="240" align="center"></el-table-column>
        <el-table-column label="预约时间" prop="yuyuedate" width="140" align="center"></el-table-column>
        <el-table-column label="是否归档" prop="guidang" width="120" align="center"></el-table-column>
        <el-table-column label="操作" width="260" align="center">
          <template #default="{ row }">
            <el-button @click="handleCancel(row)">取消预约</el-button>
            <el-button @click="handleEdit(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const searchForm = reactive({
  phone: '',
  name: '',
  gender: '',
  yuanqu: '',
  yuyuetaocao: '',
  yuyuedate: '',
  radio2: '1'
})

const genderOptions = [
  { value: 'boy', label: '男士' },
  { value: 'women', label: '已婚女士' },
  { value: 'girl', label: '未婚女士' }
]

const yuanquOptions = [
  { value: 'hunnan', label: '沈阳熙康云医院-浑南院区' },
  { value: 'sanhao', label: '沈阳熙康云医院-三好街院区' },
  { value: 'shijidasha', label: '沈阳熙康云医院-世纪大厦' }
]

const yuyuetaocaoOptions = [
  { value: 'taocanA', label: '23东软家属已婚女士套餐A' },
  { value: 'taocanB', label: '23东软家属已婚女士套餐B' },
  { value: 'taocanC', label: '23东软家属已婚女士套餐C' },
  { value: 'taocanD', label: '23东软家属已婚女士套餐D' }
]

const yuyuelist = reactive([
  {
    "ids": "2023100256211023",
    "name": "张一山",
    "phone": "13100000000",
    "address": "熙康云医院-浑南院区",
    "taocan": "23东软家属已婚女士套餐C",
    "yuyuedate": "2015-02-12",
    "guidang": "已归档"
  },
  {
    "ids": "2023100256211023",
    "name": "张一山",
    "phone": "13100000000",
    "address": "熙康云医院-浑南院区",
    "taocan": "23东软家属已婚女士套餐C",
    "yuyuedate": "2015-02-12",
    "guidang": "已归档"
  },
  {
    "ids": "2023100256211023",
    "name": "张一山",
    "phone": "13100000000",
    "address": "熙康云医院-浑南院区",
    "taocan": "23东软家属已婚女士套餐C",
    "yuyuedate": "2015-02-12",
    "guidang": "已归档"
  },
  {
    "ids": "2023100256211023",
    "name": "张一山",
    "phone": "13100000000",
    "address": "熙康云医院-浑南院区",
    "taocan": "23东软家属已婚女士套餐C",
    "yuyuedate": "2015-02-12",
    "guidang": "已归档"
  },
  {
    "ids": "2023100256211023",
    "name": "张一山",
    "phone": "13100000000",
    "address": "熙康云医院-浑南院区",
    "taocan": "23东软家属已婚女士套餐C",
    "yuyuedate": "2015-02-12",
    "guidang": "已归档"
  },
  {
    "ids": "2023100256211023",
    "name": "张一山",
    "phone": "13100000000",
    "address": "熙康云医院-浑南院区",
    "taocan": "23东软家属已婚女士套餐C",
    "yuyuedate": "2015-02-12",
    "guidang": "已归档"
  },
  {
    "ids": "2023100256211023",
    "name": "张一山",
    "phone": "13100000000",
    "address": "熙康云医院-浑南院区",
    "taocan": "23东软家属已婚女士套餐C",
    "yuyuedate": "2015-02-12",
    "guidang": "已归档"
  }
])

const handleSearch = () => {
  console.log('执行查询逻辑', searchForm)
  // 在这里添加实际的查询逻辑
}

const handleCancel = (row) => {
  console.log('执行取消预约逻辑', row)
  // 在这里添加实际的取消预约逻辑
}

const handleEdit = (row) => {
  console.log('执行编辑逻辑', row)
  // 在这里添加实际的编辑逻辑
}

</script>

<style scoped>
.appointment-list-container {
  padding: 20px;
}

.cell-item {
  display: flex;
  align-items: center;
}

.page {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
</style> 